<template>
  <div id="test">
    测试
    <h1>需求一：如何拿到vuex中的数据？</h1>
    <h2>{{$store.getters.count_userInfo}}</h2>
    <h2>{{userInfo}}</h2>
    <h2>{{info}}</h2>

    {{$store.state.token}}

    <input type="text" v-model="x">

    <button @click='fn'>按钮</button>

    {{$store.state.user.avator}}
    {{avatoar}}

    <button @click='changeUser'>修改user模块中state状态</button>

    {{userInfo_user}}

    {{count_userInfo}}

    {{avator}}
    <h1>

      {{new Date()|formatTime}}
      {{new Date('2022-01-01')|relativeTime}}
    </h1>

  </div>
</template>

<script>

import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

import { createNamespacedHelpers } from 'vuex'

const { mapState: mapStateUser, mapActions: mapActionUser, mapMutations: mapMutaionUser } = createNamespacedHelpers('user')

export default {
  name: 'Test',
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      x: ''
    }
  },
  // 计算属性
  computed: {
    info() {
      return this.$store.state.userInfo
    },
    avatoar() {
      return this.$store.state.user.avator
    },
    ...mapState({
      userInfo_user: 'userInfo',
      token: 'token'
    }),
    ...mapGetters(['count_userInfo']),
    ...mapStateUser(['avator'])
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {

  },
  methods: {

    fn() {
      // 调用mutations中的SET_USERINFO()
      // this.$store.commit('SET_USERINFO', this.x)
      // this.$store.dispatch('GET_USERINFO')
      // this.SET_USERINFO(6666)
      this.SET_USERINFO(88888)
    },
    changeUser() {
      // 修改avator
      // this.$store.commit('user/SET_AVATOR', '头像')
      this.$store.dispatch('user/GET_AVATOR', '范冰冰')
      this.changeName('吴亦凡')
    },
    ...mapActions({
      SET_USERINFO: 'GET_USERINFO'
    }),
    ...mapMutations(['SET_USERINFO']),
    ...mapMutaionUser({
      changeName: 'SET_AVATOR'
    })

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>
